import 'package:flutter/material.dart';
import 'package:flutter_quick/components/search.dart';

class friendPage extends StatelessWidget {
  const friendPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        foregroundColor: Color(0xff000000),
        backgroundColor: Color(0xffededed),
        title: Text(
          '通讯录',
          style: TextStyle(fontSize: 16),
        ),
        centerTitle: true,
        elevation: 0,
        actions: [
          Container(
            width: 50,
            child: Icon(
              Icons.person_add_alt_outlined,
              color: Color(0xff333333),
            ),
          )
        ],
      ),
      body: Stack(
        children: [
          Friends(),
        ],
      ),
    );
  }
}

class Friends extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return FriendsState();
  }
}

class FriendsState extends State<Friends> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.symmetric(),
      children: [
        Container(
          padding: EdgeInsets.only(left: 10, right: 10, bottom: 10),
          decoration: BoxDecoration(
            color: Color(0xffededed),
          ),
          child: Search(),
        ),
        FriendItem(
          cover: AssetImage('lib/assets/images/person_add.png'),
          name: '新的朋友',
        ),
        FriendItem(
          cover: AssetImage('lib/assets/images/peson_double.png'),
          name: '群聊',
        ),
        FriendItem(
          cover: AssetImage('lib/assets/images/tag.png'),
          name: '标签',
        ),
        FriendItem(
          cover: AssetImage('lib/assets/images/peson.png'),
          name: '公众号',
        ),
        FriendItem(
          cover: AssetImage('lib/assets/images/wx.png'),
          name: '企业微信联系人',
        ),
        Container(
          color: Color(0xffededed),
          padding: EdgeInsets.only(left: 15),
          height: 30,
          child: Row(
            children: [
              const Text(
                'A',
                style: TextStyle(color: Color(0xff686868), fontSize: 12),
              )
            ],
          ),
        ),
        FriendItem(
          cover: NetworkImage(
              'https://images.pexels.com/photos/8783490/pexels-photo-8783490.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=140&w=140'),
          name: '啊文',
        ),
        FriendItem(
          cover: NetworkImage(
              'https://images.pexels.com/photos/8783490/pexels-photo-8783490.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=140&w=140'),
          name: '啊文',
        ),
        FriendItem(
          cover: NetworkImage(
              'https://images.pexels.com/photos/8783490/pexels-photo-8783490.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=140&w=140'),
          name: '啊文',
        ),
        FriendItem(
          cover: NetworkImage(
              'https://images.pexels.com/photos/8783490/pexels-photo-8783490.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=140&w=140'),
          name: '啊文',
        ),
        FriendItem(
          cover: NetworkImage(
              'https://images.pexels.com/photos/8783490/pexels-photo-8783490.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=140&w=140'),
          name: '啊文',
        ),
        FriendItem(
          cover: NetworkImage(
              'https://images.pexels.com/photos/8783490/pexels-photo-8783490.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=140&w=140'),
          name: '啊文',
        ),
      ],
    );
  }
}

class FriendItem extends StatelessWidget {
  ImageProvider<Object> cover;
  String name;
  FriendItem({Key? key, required this.cover, required this.name})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {},
      child: Container(
        padding: const EdgeInsets.only(
          left: 14,
        ),
        child: Row(
          children: [
            Container(
              width: 38,
              height: 38,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(4)),
                image: DecorationImage(
                  image: cover,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Expanded(
              child: Container(
                height: 50,
                decoration: const BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      color: Color(0xffe6e6e6),
                    ),
                  ),
                ),
                margin: const EdgeInsets.only(
                  left: 10,
                ),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [Text(name)],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
